<template>
  <BasicTable @register="registerTable">
    <template #form-custom></template>
    <template #toolbar>
      <a-button
        v-if="hasPermission('resource_tagClassification_add')"
        type="primary"
        @click="handleCreate"
      >
        新增</a-button
      >
      <a-button type="primary" @click="expandAll">展开全部</a-button>
      <a-button type="primary" @click="collapseAll">折叠全部</a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'clarity:note-edit-line',
            onClick: handleEdit.bind(null, record),
            auth: 'resource_tagClassification_edit',
          },
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
              auth: 'resource_tagClassification_del',
            },
          },
        ]"
      />
    </template>
  </BasicTable>
  <!--注册drawer  -->
  <TagClassificationDrawer @register="registerDrawer" @success="handleSuccess" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './tagClassificationTableData';
  //左侧拉板
  import { useDrawer } from '/@/components/Drawer';

  import { message } from 'ant-design-vue';
  import {
    getTagClassificationByIdApi,
    getTagClassificationTreeApi,
    tagClassificationDelByIdApi,
  } from '/@/api/resource/tagClassificationApi';
  import TagClassificationDrawer from '/@/views/resource/tagClassification/tagClassificationDrawer.vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { FormActionType } from '/@/components/Form';

  const { hasPermission } = usePermission();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const checkedKeys = ref<Array<string | number>>([]);

  //此处减去的430是其他固定元素块的总高度
  const tableHeight = ref({ x: '100%', y: document.body.clientHeight - 430 });

  const [registerTable, { reload, expandAll, collapseAll, setLoading }] = useTable({
    title: '分类管理',
    columns: getBasicColumns(),
    useSearchForm: true,
    striped: false,
    isTreeTable: true,
    formConfig: getFormConfig(),
    showTableSetting: true,
    bordered: true,
    canResize: false,
    showIndexColumn: false,
    pagination: false,
    scroll: tableHeight,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    api: getTagClassificationTreeApi,
    /*fetchSetting: {
    pageField: 'current',
    // 每页显示多少条
    sizeField: 'pageSize',
    // 请求结果列表字段  支持 a.b.c
    listField: 'records',
    totalField: 'total',

  },*/
  });

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  async function handleEdit(record: Recordable) {
    const data = await getTagClassificationByIdApi(record.id);
    openDrawer(true, {
      data,
      isUpdate: true,
    });
  }

  async function handleDelete(record: Recordable) {
    await tagClassificationDelByIdApi(record.id);
    reload();
    message.success('删除成功');
  }

  function handleSuccess() {
    reload();
  }

  onMounted(() => {
    //监听浏览器窗口变化
    window.onresize = () => {
      return (() => {
        tableHeight.value.y = document.body.clientHeight - 430;
      })();
    };
  });
</script>
